<template>
  <view class="min-h-screen bg-[#f8f9fb] flex flex-col">
    <!-- 顶部标题 -->
    <view class="p-4 bg-gradient-to-r from-blue-400 to-blue-600 text-white">
      <text class="block text-xl font-bold">物业报修</text>
      <text class="block text-sm mt-1 opacity-90"
        >请填写报修信息，我们会尽快为您处理</text
      >
    </view>

    <!-- 表单卡片 -->
    <view class="m-4 bg-white rounded-2xl shadow p-4">
      <wd-form ref="form" :model="model">
        <wd-cell-group border>
          <!-- 户号 -->
          <!-- <wd-input
            label="户号"
            label-width="80px"
            prop="house"
            clearable
            v-model="model.house"
            placeholder="请输入户号"
            :rules="[{ required: true, message: '请填写户号' }]"
          /> -->

          <!-- 报修类型 -->
          <wd-picker
            label="报修类型"
            label-width="80px"
            prop="type"
            v-model="model.type"
            :columns="typeOptions"
            :rules="[{ required: true, message: '请选择报修类型' }]"
          />

          <!-- 预约时间 -->
          <wd-datetime-picker
            v-model="model.date"
            label="预约时间"
            type="datetime"
            :min-date="Date.now()"
            :rules="[{ required: true, message: '请选择预约时间' }]"
            @confirm="handleConfirm"
          />
        </wd-cell-group>

        <!-- 提交按钮 -->
        <view class="mt-6">
          <wd-button
            type="primary"
            size="large"
            block
            round
            @click="handleSubmit"
          >
            提交报修
          </wd-button>
        </view>
      </wd-form>
    </view>

    <!-- 额外提示/历史入口 -->
    <view class="px-4 mt-auto mb-6">
      <view class="text-gray-500 text-sm text-center">
        📌 提示：请确保填写的信息准确，以便物业工作人员联系您
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { addRepire } from '@/api/repiar'
import useStore from '@/store'
import dayjs from 'dayjs'

const { useUser } = useStore()

// 表单数据
const model = reactive<{
  house: string
  type: string
  date: number | null
}>({
  house: '',
  type: '',
  date: null
})

const form = ref()

// 报修类型
const typeOptions = [
  { value: '水管', label: '水管' },
  { value: '桌子', label: '桌子' },
  { value: '家电', label: '家电' }
]

// 时间选择
function handleConfirm({ value }: { value: number }) {
  model.date = value
  console.log('选择时间：', new Date(value))
}

// 提交
function handleSubmit() {
  form.value
    .validate()
    .then(async ({ valid }: { valid: boolean }) => {
      if (valid) {
        const res = await addRepire<any, IRepair>({
          house_id: uni.getStorageSync('house_name').id,
          user_id: useUser.getUser.id || '',
          repair_type: model.type,
          appointment_time: dayjs(model.date).format('YYYY-MM-DD HH:mm:ss')
        })
        if (res.code === 200) {
          uni.showToast({
            title: '报修成功！',
            icon: 'success'
          })
        }
      }
    })
    .catch((error: any) => {
      console.log(error, 'error')
    })
}
</script>

<style scoped>
/* 让按钮更圆润 */
.wd-button {
  border-radius: 9999px;
}
</style>
